Skip to content

Products Onboarding: Update banner design based on review feedback #8034

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 4 commits into from
Nov 4, 2022
Merged

Products Onboarding: Update banner design based on review feedback #8034

merged 4 commits into from
Nov 4, 2022

Conversation

@rachelmcr
Copy link
Contributor

@rachelmcr rachelmcr commented Nov 4, 2022 •
edited
Loading

Closes: #8032

Description

This PR makes the following design changes based on our design review:

  • Adds top and bottom borders to the banner
  • Makes the banner dismissible (the user can dismiss the banner and it will not appear again)

This reverts the previous changes that removed the dismiss button from the onboarding banner. Now, we use a FeatureAnnouncementCampaign and the corresponding AppSettingsActions to set when the banner has been dismissed by the user and check that it wasn't dismissed before displaying it.

Using a FeatureAnnouncementCampaign for this is a bit of a shortcut but seems worth it to quickly add the dismiss button for this banner.

Testing

Prerequisite (before launching the app)

  1. Open the experiment details in Abacus (linked at the top of pbxNRc-26F-p2 or ping me for the direct link).
  2. In the Audience section of the experiment setup, go to Variations > Manual Assignment and use the bookmarklet to assign yourself to the treatment group.

Test steps

  1. Build and run the app. Note: You must be logged in to the app with an a8c account to test the experiment assignment/behavior while the experiment is in staging. If you are logged in to a different account, log out and log in again with your a8c account.
  2. Select a store with no products.
  3. Confirm you see the products onboarding banner on the My Store dashboard, with the expected design (top/bottom borders and a dismiss button).
  4. Tap the "Add a Product" call to action, but don't add a product.
  5. Go back to My Store, pull to refresh, and confirm the banner appears again.
  6. Tap the "X" to dismiss the banner permanently.
  7. Pull to refresh and confirm the banner does not appear again.

Screenshots

Before After
ProductsOnboarding-Banner Simulator Screen Shot - iPhone 14 Pro - 2022-11-04 at 13 26 28

Submitter Checklist

Update release notes:

  • I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

@rachelmcr rachelmcr added status: feature-flagged Behind a feature flag. Milestone is not strongly held. feature: products onboarding Related to onboarding new users to manage products labels Nov 4, 2022
@rachelmcr rachelmcr added this to the 11.1 milestone Nov 4, 2022
@wpmobilebot
Copy link
Collaborator

wpmobilebot commented Nov 4, 2022

You can test the changes from this Pull Request by:
  • Clicking here or scanning the QR code below to access App Center
  • Then installing the build number pr8034-a4e1ed4 on your iPhone

If you need access to App Center, please ask a maintainer to add you.

@Ecarrion Ecarrion self-assigned this Nov 4, 2022
Ecarrion
Ecarrion approved these changes Nov 4, 2022
View reviewed changes
Copy link
Contributor

@Ecarrion Ecarrion left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code looks good and tests were good too!

I almost go crazy looking at the screenshots because I didn't see any border difference but after changing the showDividers to false I finally see them 😅

I still think that we should not provide a way to dismiss the banner to greatly enforce an improvement in our metric but 🤷

@rachelmcr
Copy link
Contributor Author

rachelmcr commented Nov 4, 2022 •
edited
Loading

Sorry about the borders! It looks like I accidentally grabbed the wrong "before" screenshot for the PR description and didn't realize it. I'll update it in case anyone checks it in the future.

I still think that we should not provide a way to dismiss the banner to greatly enforce an improvement in our metric but 🤷

I know what you mean but I think it's a balance between improving the metric and annoying people. If it doesn't perform well enough in the experiment we can always try again without the dismiss button and see how it goes 🤷‍♀️

@rachelmcr rachelmcr merged commit 6930254 into trunk Nov 4, 2022
@rachelmcr rachelmcr deleted the issue/8032-banner-design-feedback branch November 4, 2022 15:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@ealeksandrov ealeksandrov Awaiting requested review from ealeksandrov

1 more reviewer

@Ecarrion Ecarrion Ecarrion approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

@Ecarrion Ecarrion

Labels

feature: products onboarding Related to onboarding new users to manage products status: feature-flagged Behind a feature flag. Milestone is not strongly held.

Projects

None yet

Milestone

11.1

Development

Successfully merging this pull request may close these issues.

Products Onboarding: Update banner design with design review feedback

4 participants

@rachelmcr @wpmobilebot @Ecarrion